<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search">
      <!-- Element UI 输入框，带搜索图标 -->
      <el-input 
        size="small" 
        placeholder="请输入内容" 
        prefix-icon="el-icon-search" 
        v-model="search">
      </el-input>
      <!-- Element UI 按钮，触发查询操作 -->
      <el-button 
        class="search-button" 
        size="small" 
        type="primary" 
        @click="getSearchList">查询</el-button>
    </div>
    <!-- 用户列表表格 -->
    <div class="ctable">
      <el-table 
        :data="userList" 
        border 
        style="width: 100%"
        row-key="id">
        <!-- 序号列 -->
        <el-table-column 
          fixed 
          type="index" 
          label="序号" 
          width="180">
          
        </el-table-column>
        <!-- 用户名列 -->
        <el-table-column 
          fixed 
          prop="username" 
          label="用户名" 
          width="150">
        </el-table-column>
        <!-- 其他列... -->
        <el-table-column 
          prop="age" 
          label="年龄" 
          width="100">
        </el-table-column>
        <el-table-column 
          prop="gender" 
          label="性别" 
          width="100">
        </el-table-column>
        <el-table-column 
          prop="nickname" 
          label="昵称" 
          width="120">
        </el-table-column>
        <el-table-column 
          prop="role" 
          label="角色" 
          width="100">
        </el-table-column>
        <!-- 禁用解禁列 -->
        <el-table-column 
          prop="flag" 
          label="禁用解禁" 
          width="120">
          <template slot-scope="scope">
            <el-button 
              class="flag-button" 
              type="scope.row.flag ? 'success' : 'danger'" 
              size="small" 
              @click="handleFlag(scope.row.id)">
              {{ scope.row.flag ? '禁用' : '解禁' }}
            </el-button>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column 
          fixed="right" 
          label="操作" 
          width="250">
          <template slot-scope="scope">
            <el-button 
              class="reset-password-button" 
              type="primary" 
              size="small" 
              @click="handleReset(scope.row.id)">
              重置密码
            </el-button>
            <el-button 
              class="delete-button" 
              type="danger" 
              size="small" 
              @click="handleDelete(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'index',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      search: '',
      userList: []
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      // 获取用户列表的方法
      const userinfo = JSON.parse(localStorage.getItem('userinfo'))
      this.$http.get(`/users/backend/list?id=${userinfo.id}`).then(res => {
        if (res.data.code === 1) {
          this.userList = res.data.list
        }
      })
    },
    getSearchList() {
       // 根据搜索条件获取用户列表的方法
      const userinfo = JSON.parse(localStorage.getItem('userinfo'))
      this.$http.get(`/users/backend/search?id=${userinfo.id}&searchStr=${this.search}`).then(res => {
        if (res.data.code === 1) {
          this.userList = res.data.list
        }
      })
    },
    handleDelete(id) {
      // 删除用户的操作方法
      const userinfo = JSON.parse(localStorage.getItem('userinfo'))
      this.$http.post('/users/backend/del', { id: userinfo.id, uid: id }).then(res=>{
        if(res.data.code===1){
          this.$message(res.data.message)
          this.getList()
        }else{
          this.$message('删除失败')
        }
      })
    },
    handleFlag(id){
       // 禁用或解禁用户的操作方法
      const userinfo = JSON.parse(localStorage.getItem('userinfo'))
      this.$http.post('/users/backend/flag', { id: userinfo.id, uid: id }).then(res=>{
        if(res.data.code===1){
          this.$message(res.data.message)
          this.getList()
        }else{
          this.$message('操作失败')
        }
      })
    },
    handleReset(id){
      // 重置用户密码的操作方法
      const userinfo = JSON.parse(localStorage.getItem('userinfo'))
      this.$http.post('/users/backend/reset', { id: userinfo.id, uid: id }).then(res=>{
        if(res.data.code===1){
          this.$message(res.data.message)
          this.getList()
        }else{
          this.$message('操作失败')
        }
      })
    }
  }
};
</script>
<style scoped>
/* 搜索区域样式 */
.search {
  margin-bottom: 20px;
  text-align: right;
}

/* 输入框和按钮统一尺寸 */
.el-input, .el-button {
  margin: 5px 0;
}

/* 查询按钮样式 */
.search-button {
  background-color: #409eff; /* Element UI 主题蓝色 */
  border-color: #409eff;
}

/* 表格样式 */
.ctable {
  width: 100%;
}

/* 表格头部样式 */
.el-table thead {
  background-color: #f5f7fa; /* 浅灰色背景 */
}

/* 表格行悬停效果 */
.el-table tbody tr:hover > td {
  background-color: #e6f7ff; /* 悬停时的背景色 */
}

/* 禁用解禁按钮样式 */
.flag-button {
  margin-right: 8px; /* 按钮间距 */
}

/* 重置密码按钮样式 */
.reset-password-button {
  background-color: #67c23a; /* 成功按钮绿色 */
  border-color: #67c23a;
}

/* 删除按钮样式 */
.delete-button {
  background-color: #f56c6c; /* 危险按钮红色 */
  border-color: #f56c6c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search {
    text-align: left;
  }
}
</style>